<template>
  <el-dialog
    :visible.sync="numDialogVisible"
    width="60%"
    :close-on-click-modal="false"
    :before-close="closeNumDialog"
  >
    <div class="num-dialog">
    <el-form class="form" label-width="80px">
      <el-form-item class="w320" label="项目名称">
        <el-input  v-model="extractItem" placeholder="请输入项目名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button class="btn" type="primary" icon="el-icon-search" size="small" @click="search">搜索</el-button>
      </el-form-item>
    </el-form>
    <div class="extract-num">抽取项目总数量：{{currentRow.amount}}</div>
    <el-table
      :data="tableData"
      stripe
      style="width: 100%">
      <el-table-column
        prop="index"
        label="序号"
        align="center"
        width="100">
      </el-table-column>
      <el-table-column
        prop="extract_item"
        label="项目名称"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="extract_price"
        align="right"
        label="工程费用"
        width="80"
      >
      </el-table-column>
      <el-table-column
        prop="unitType_name"
        align="center"
        show-overflow-tooltip
        label="抽取库">
      </el-table-column>
      <el-table-column
        prop="random_unit_name"
        show-overflow-tooltip
        label="中标单位">
      </el-table-column>
      <el-table-column
        prop="charge"
        align="center"
        label="操作">
        <template slot-scope="scope">
          <el-button size="small" type="text" @click="printTable(scope.row)">打印</el-button>
        </template>
      </el-table-column>
    </el-table>
    <printTable
      :openPrint="openPrint"
      @numDialog="numDialog"
      :printData="printData"
      :linkInfo="linkInfo"
    />
  </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeNumDialog">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import printTable from "@/views/unit/extract/seePoints/components/printTable";
import {getMonthResult,getOutbid} from "@/api/unit/monthCharts";
export default {
  name: "numDialog",
  props:['numDialogVisible','tableData','currentRow','getNumDetail'],
  components:{
    printTable
  },
  data(){
    return {
      openPrint:false,
      extractItem:'',
      printData:{},
      linkInfo:[]
    }
  },
  methods:{
    // 打印表格
    async printTable(row){
      this.openPrint = true
      const params = {}
      params.month = row.create_time.substr(5,2)
      const firstM = params.month.substr(0,1)
      const lastM = params.month.substr(1,1)
      params.month = firstM === '0' ? lastM : params.month
      params.randomUnitId = row.random_unit_id
      this.printData = {}
      const res = await getMonthResult(params)
      if(res.data.length > 0){
        this.printData =res.data[0]
      }
      const result = await getOutbid({
        extractId:row.extract_id,
        randomBan:3,
        randomUnitId:row.random_unit_id
      })
      this.linkInfo = result.rows
    },
    // 搜索
    search(){
      if(this.extractItem.trim().length === 0){
        return
      }
      this.getNumDetail(this.currentRow,this.extractItem)
    },
    // 关闭弹窗
    closeNumDialog(val){
      this.extractItem = ''
      this.$emit('staticIndex')
    },
    // 关闭子组件table弹窗
    numDialog(){
      this.openPrint = false
    }
  },
}
</script>

<style lang="scss" scoped>
.num-dialog{
  padding: 0 20px;
  .form{
    margin-left: -10px;
    display: flex;
  }
  .w320{
    width: 320px!important;
  }
  .extract-num{
    padding-bottom: 20px;
    font-size: 16px;
    font-weight: 600;
  }
  .btn{
    margin-left: -40px;
  }
}
::v-deep.el-table--fit{
  height: 400px;
  overflow: auto;
}
::v-deep.el-table::before{
  background-color: unset;
}
</style>
